<!--
 * @Description: nodeType
 * @Author: zzj
 * @Date: 2021-09-13 09:22:33
 * @LastEditors: zzj
 * @LastEditTime: 2021-09-15 18:45:59
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nodeType</title>
</head>
<body>
    
    <div id="a1">zzj学习node</div><ul id="myul">
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ul><div>下一个节点</div>
    <script>
        //document：9
        console.log(document.nodeType);
        console.log(document.body);  //返回body节点
        document.body.style.backgroundColor = "yellow";
        //element：1
        var ele = document.createElement("div");
        console.log(ele.nodeType);
        console.log(ele.nodeName);   //返回标签的名称
        console.log(ele.nodeValue);  //注意该标签是否含有value属性
        //textNode：3
        var text = document.createTextNode("zzj学习node");
        console.log(text.nodeType);
        //comment：8
        var com = document.createComment("这是一行注释");
        console.log(com.nodeType);

        //document的属性在获取节点时，需要注意空白节点
        var myul = document.getElementById("myul");
        console.log(myul.childNodes.length);   //返回所有的节点及节点个数
        console.log(myul.children.length);  //返回所有的element类型的子节点个数
        var lis = myul.children;
        lis[0].style.backgroundColor = "red";
        console.log(lis[0].parentNode);  //指向父节点

        //注意节点间的空格算空白节点
        myul.previousSibling.style.backgroundColor = "blue";  //该节点的同辈的上一个节点
        myul.nextSibling.style.backgroundColor = "purple";  //该节点的同辈的下一个节点

        console.log(myul.firstChild); // 列表中的第一个子节点
        console.log(myul.lastChild); //列表中的最后一个节点
        console.log(myul.ownerDocument);  //返回document

        //方法
        console.log(myul.hasChildNodes());  //非空节点返回true

        //appendChild() 方法
        //往html中添加一个子元素li,内容为《听妈妈的话》
        //1.创建文本节点
        var t = document.createTextNode("appendChild()");
        //2.创建ele节点
        var e = document.createElement("li");
        //3.将文本放到ele节点中
        e.appendChild(t);
        //4.将ele放到ul中
        myul.appendChild(e);

        //interBefore() 方法
        //1.创建文本节点
        var t = document.createTextNode("insertBefore()");
        //2.创建ele节点
        var e = document.createElement("li");
        //3.将文本放到ele节点中
        e.appendChild(t);
        //interBefore()  放到同辈参照物的前面
        myul.insertBefore(e,lis[1]);

        //replaceChild ()方法
        //1.创建文本节点
        var t = document.createTextNode("replaceChild() ");
        //2.创建ele节点
        var e = document.createElement("li");
        e.style.backgroundColor = "green";
        //3.将文本放到ele节点中
        e.appendChild(t);
        //replaceChild () 替换某个dom
        myul.replaceChild(e,lis[0]);

        //removeChild() 移除某个节点
        myul.removeChild(lis[2]);

        //克隆
        var a1 = document.getElementById("a1");
        var a2 = a1.cloneNode(true);
        /*
        如果有参数的情况下，默认为浅拷贝，不拷贝内容；
        如果希望拷贝内容，执行值为true,变成深拷贝
        需要注意事件，因为在主流浏览器中，事件深拷贝时，不会被拷贝
        但是IE会被拷贝，所以在拷贝有事件的标签时，建议先删除事件
        */
       console.log(a2);

       console.log(myul.childNodes.length);
       myul.normalize();//多个节点间有空白，会将空白合并
       console.log(myul.childNodes.length);

        var t = document.createTextNode("hello");
        a1.appendChild(t);
        console.log(a1.childNodes.length);
        var t1 = document.createTextNode("1");
        a1.appendChild(t1);
        console.log(a1.childNodes.length);
        var t2 = document.createTextNode("2");
        a1.appendChild(t2);
        console.log(a1.childNodes.length);
        var t3 = document.createTextNode("3");
        a1.appendChild(t3);
        console.log(a1.childNodes.length);
        myul.normalize();
        console.log(a1.childNodes.length);
    </script>
</body>
</html>